<!doctype html>
<html  xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>部门信息</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/jsrender.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function (){
            function validate(){

                //假设电话填写有限制：
                if(!/^[0-9]*[1-9][0-9]*$/.test($("#userid").val())){
                    alert("用户id只能是数字")
                    console.debug($("#userid").val())
                    $("#userid").val("")
                    return false
                }
                return true
            }
            if(localStorage.getItem("token")==null){
                window.location.href="login.html"
            }
            var pageNum = 1		// 记录当前页面
            var method = "showAll"	// 记录当前方法
            var pages	// 记录页面总数
            const pageSize = 5 //页面行数
            function showAll(){
                //请求所有部门信息
                $.ajax({
                    url:GC.bctx + "list",//后端请求映射路径
                    type:"GET",
                    data: {pageNum:pageNum,pageSize:pageSize},
                    headers: {"Authorization": localStorage.getItem("token")},
                    success:function (r) {
                        if(r.successed){
                            //jsrender模板渲染
                            $("#managers").html($("#managersTemplate").render(r.data.list))
                            $("#pagination").html($("#paginationTemplate").render(r.data))
                            pages = r.data.pages
                            method = "showAll"
                        }else{
                            window.location.href="login.html"
                        }
                    }
                })
            }
            showAll()
            //根据id查询用户
            function find() {
                if(!validate()){
                    return false
                }
                $.ajax({
                    url: GC.bctx + "find",
                    type: "GET",
                    data: {"userId":$("#userid").val(),pageNum:pageNum,pageSize:pageSize},
                    headers: {"Authorization": localStorage.getItem("token")},
                    success: function (r) {
                        if (r.successed) {
                            $("#managers").html($("#managersTemplate").render(r.data.list))
                            $("#pagination").html($("#paginationTemplate").render(r.data))
                            pages = r.data.pages
                            method = "find"
                        } else {
                            alert(r.message)
                        }
                    }
                })
            }
            $("form").submit(function () {
                $("#userid").val() == ""  ? showAll() : find()
                return false
            })

            // 分页组件点击跳转，两种情况
            $(document).on("click", "[name=jump]", function() {
                pageNum = this.innerHTML	// 获取<a>的内容
                method == "showAll" ? showAll() : find()
            })

            // 点击上一页按钮
            $(document).on("click", "[name=previous]", function() {
                if(pageNum-1 > 0) {
                    pageNum = pageNum-1
                    method == "showAll" ? showAll() : find()
                } else {
                    alert("当前页为第1页")
                }
            })

            // 点击下一页按钮
            $(document).on("click", "[name=next]", function() {
                if(pageNum+1 <= pages) {
                    pageNum = pageNum+1
                    method == "showAll" ? showAll() : find()
                } else {
                    alert("当前页为最后1页")
                }
            })

            //响应新建部门页面
            $("#newMan").click(function() {
                window.location.href="insertUser.html"
            })
            //响应删除部门
            //ajax
            // $("#deleteDept").click(function() {
            $("#managers").on("click",".btn-delete",function () {
                //var id=$(this).parent().parent().find("td:first").text()   //传统方法
                var userAccount = $(this).attr("data-userAccount")            //取值方法
                if(localStorage.getItem("position")==0)
                {
                    alert("您的权限不足")
                    return
                }
                //删除2：二次确认
                if(!window.confirm("确定删除以下账号的用户吗？ \n" + userAccount)){
                    return;
                }
                if(!window.confirm("若该用户是护士，会连同护士信息一起删除，请再次确认")){
                    return;
                }
                //ajax提交请求
                $.ajax({
                    url:GC.bctx + "fakeDelete/"+userAccount,
                    type:"PUT",
                    headers: {"Authorization": localStorage.getItem("token")},
                    success:function(r){
                        if(r.successed){
                            //成功后
                            alert(r.message)
                           showAll()
                        }else{
                            alert(r.message)
                        }
                    }
                })
            })
        })
    </script>
</head>
<body style="background:transparent;">
<div class="float-left">
    <form action="find" method="get" class="container-fluid text-center">
        <input name="userId" id="userid" type="text" placeholder="用户id"/>
        <input class="btn btn-info" type="submit" value="查 询"/>
    </form>
</div>
<button id="newMan" class="btn btn-info">👳‍添 加</button>
<script id="managersTemplate" type="text/x-jsrender">
	<tr align="center">
		<td>{{:userId}}</td>
		<td>{{:userAccount}}</td>
		<td>{{:userTelephone}}</td>
		<td>{{:userPosition}}</td>
		<td colspan="2" align="center">
<!--            <a  name="updateDept" class="btn btn-info" data-id="{{:id}}" href="javascript:void(0);">修改</a>-->
            <a href="updateManager.html?userAccount={{:userAccount}}" class="btn btn-update btn-info" data-id="{{:id}}">修改</a>
            <button name="deleteMan" class="btn btn-delete btn-danger" data-userAccount="{{:userAccount}}">删除</button>
         </td>
	</tr>
    </script>

<table class="table table-active" >
    <tr>
        <th>用户id</th>
        <th>用户账号</th>
        <th>用户联系电话</th>
        <th>用户职权</th>
    </tr>
    <tbody id="managers"></tbody>
</table>
<!--分页-->
<div align="center">
    <ul class="pagination" id="pagination"></ul>
    <script id="paginationTemplate" type="text/x-jsrender">
		<li class="page-item"><a class="page-link" href="javascript:void(0);" name="previous">&laquo;</a></li>
		{{for navigatepageNums}}
		<li class="page-item"><a class="page-link" href="javascript:void(0);" name="jump">{{:#data}}</a></li>
		{{/for}}
		<li class="page-item"><a class="page-link" href="javascript:void(0);" name="next">&raquo;</a></li>
	</script>
</div>
</body>
</html>